<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js" /></script>
	<!-- 导入easyui类库 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
	
<script type="text/javascript">
	var endIndex;
	var toolbar = [
	               {text:'添加一行',iconCls:'icon-add',handler:function(){
	            	   $("#grid").datagrid("insertRow",{
	            		   index:0,
	            		   row:{}
	            	   });
	            	   endIndex = 0;
	            	   $("#grid").datagrid("beginEdit",0);
	               }},
	               {text:'编辑',iconCls:'icon-edit',handler:function(){
	            	   var rows = $("#grid").datagrid("getSelections");
	            	   endIndex = $("#grid").datagrid("getRowIndex",rows[0]);
	            	   if(rows.length == 1){
	            	   	   $("#grid").datagrid("beginEdit",endIndex);
	            	   }
	               }},
	               {text:'保存',iconCls:'icon-save',handler:function(){
	            	   $("#grid").datagrid("endEdit",endIndex);
	               }}
	               ];
	$(function(){
		$("#grid").datagrid({
			columns:[[
			          {field:'id',title:'编号',editor:{
			        	  type:"validatebox",
			          	  options:{
			          		  required:true
			          	  }
			          }},
			          {field:'name',title:'姓名',editor:{
			        	  type:"validatebox",
			          	  options:{
			          		  required:true
			          	  }
			          }},
			          {field:'age',title:'年龄',editor:{
			        	  type:"validatebox",
			          	  options:{
			          		  required:true
			          	  }
			          }}
			          ]],
			url:'${pageContext.request.contextPath}/json/data.json',
			pagination:true,
			striped:true,
			toolbar:toolbar,
			//pagePosition:'top'
			pageList:[20,30,40,50]
		});
	});
</script>
</head>
<body>
	<table id="grid"></table>
</body>
</html>